<template>
    <div class="big">
        <header>
            <img src="../../assets//home-img/返回1.png" alt="" @click="back">
            <input type="text" class="inp" placeholder="搜索医生、医院、药品、疾病症状" v-model="keywords" />
            <button @click="search">搜索</button>
        </header>
        <main>
            <van-tabs v-model:active="active">
                <van-tab title="综合">
                    <div class="middle">
                        <div class="list">
                            <div class="listbottom">
                                <div v-for="(item, index) in doctorList" :key="index" class="listitem"
                                    @click="toDetail(item.id)">
                                    <div class="left">
                                        <img :src="item.avatar" alt="" />
                                    </div>
                                    <div class="right">
                                        <!-- 名字 -->
                                        <h2 class="name">
                                            {{ item.name }}
                                            <span class="director">{{ item.position }}</span>
                                            <button class="third" v-if="item.optimum === true">三甲</button>
                                        </h2>
                                        <!-- 医院 -->
                                        <div class="hospital">{{ item.hospital }} &ensp; {{ item.class }}</div>
                                        <!-- 咨询 -->
                                        <div class="consult">
                                            <div class="blue">图文咨询</div>
                                            <div class="green">电话咨询</div>
                                            <div class="cyan">视频咨询</div>
                                        </div>
                                        <!-- 擅长 -->
                                        <div class="excel">
                                            <div class="van-multi-ellipsis--l2">
                                                擅长: {{ item.strong }}
                                            </div>
                                        </div>
                                        <!-- 好评 -->
                                        <div class="like">
                                            <span>好评率&ensp;<span class="color">{{ item.browse }}%</span></span>
                                            <span class="separate">|</span>
                                            <span>锦旗&ensp;<span class="color">3</span> </span>
                                            <span class="separate">|</span>
                                            <span>浏览人次&ensp;<span class="color">{{ item.fans }}</span>
                                            </span>
                                        </div>
                                        <!-- 问医生 -->
                                        <div class="ask">
                                            <span class="price">¥ <span class="num">{{ item.person }}</span> <span
                                                    style="color: #cacaca; font-weight: 400;">起</span></span>
                                            <button class="btn">问医生</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="footer">
                        <div v-for="(item, ind) in medicineList" :key="ind">
                            <div class="fff">
                                <img :src="item.imgs" alt="">
                                <p style="width: 300px;font-size: 30px;line-height: 40px;" class="tit">
                                    {{ item.title }}
                                </p>
                                <p style="color: red;font-size: 40px;margin-left: 20px;margin-top: 20px;">
                                    ￥{{ item.price }}
                                </p>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="科普">内容 2</van-tab>
                <van-tab title="医生">内容 3</van-tab>
                <van-tab title="医院">内容 4</van-tab>
                <van-tab title="药品">内容 4</van-tab>
            </van-tabs>
        </main>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '../../http/http';

const keywords = ref('');
const router = useRouter();
const active = ref(0);

// 医生数据
const doctorList = ref([]);
// 药品数据
const medicineList = ref([]);
// 历史记录
const history = ref([]);

const search = async () => {
    await http.get(`/doctorList?searchValue=${keywords.value}`).then(res => {
        doctorList.value = res.data.data;
    })
    await http.get(`/shop?title=${keywords.value}`).then(res => {
        medicineList.value = res.data.data;
    })
}

const toDetail = async (id) => {
    router.push({ path: '/homeDetail', query: { id: id } })

}

const back = () => {
    router.back();
}

</script>

<style lang="scss" scoped>
.big {
    width: 100%;
    height: 1330px;
    background-color: #f6f6f6;
    overflow: scroll;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }

    header {
        width: 100%;
        height: 100px;
        // padding: 0 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;


        img {
            width: 40px;
            height: 40px;
            margin: 0 20px;
        }

        .inp {
            width: 550px;
            height: 70px;
            text-indent: 2.5em;
            background-color: #f6f6f6;
            background-image: url('../../assets/home-img/搜索.png');
            background-position: 20px center;
            background-size: 30px 30px;
            background-repeat: no-repeat;
            border: 0;
            border-radius: 15px;
            font-size: 25px;
            outline: none;

            &::placeholder {
                color: #959595;
                font-weight: 400;
            }
        }

        button {
            width: 100px;
            margin: 0 20px;
            border: 0;
            font-size: 30px;
            background: #fff;
            color: #2d6cf9;
        }
    }

    .middle {
        width: 95%;
        // height: 427px;
        padding: 0 15px;
        overflow: hidden;
        background-color: #fff;
        margin: 10px auto;
        border-radius: 20px;

        .list {
            width: 100%;
            // height: 880px;

            .listbottom {
                width: 100%;
                // height: 800px;
                overflow: hidden;
                margin-top: 25px;

                .listitem {
                    width: 100%;
                    height: 400px;
                    margin-bottom: 10px;
                    border-bottom: 1px solid #f6f6f8;

                    .left {
                        width: 20%;
                        height: 100%;
                        float: left;
                        padding-left: 10px;

                        img {
                            width: 120px;
                            height: 120px;
                            border-radius: 60px;
                        }
                    }

                    .right {
                        width: 80%;
                        height: 100%;
                        float: right;
                        padding-left: 10px;
                        padding-right: 10px;

                        .name {
                            font-size: 40px;
                            // text-indent: 20px;
                            width: 100%;
                            height: 60px;
                            line-height: 60px;

                            .director {
                                font-size: 30px;
                                font-weight: 400;
                                margin: 0 10px;
                            }

                            .third {
                                font-size: 23px;
                                background-color: #00ba82;
                                font-weight: 400;
                                border-radius: 10px;
                                width: 70px;
                                height: 40px;
                                text-align: center;
                                line-height: 40px;
                                color: #fff;
                                border: 0;
                            }
                        }

                        .hospital {
                            font-size: 30px;
                            margin-bottom: 10px;
                        }

                        .consult {
                            display: flex;
                            justify-self: flex-start;
                            font-size: 25px;

                            div {
                                width: 140px;
                                height: 45px;
                                margin-right: 15px;
                                padding: 10px;
                                text-align: center;
                                line-height: 30px;
                                font-weight: bold;
                                // display: flex;
                                // align-items: center;
                                border-radius: 10px;
                            }

                            .blue {
                                background-color: #e6edff;
                                color: #316be9;
                            }

                            .green {
                                background-color: #e1f8f2;
                                color: #1db386;
                            }

                            .cyan {
                                background-color: #e4f0ff;
                                color: #06a1e4;
                            }
                        }

                        .excel {
                            margin-top: 20px;
                            font-size: 28px;
                            color: #545454;
                        }

                        .like {
                            display: flex;
                            justify-content: space-between;
                            margin-top: 10px;
                            font-size: 25px;
                            color: #707070;

                            .color {
                                color: #e05500;
                                font-weight: bold;
                                font-size: 30px;
                            }

                            .separate {
                                margin: 0 10px;
                                font-weight: 50;
                                color: #e5e5e5;
                            }
                        }

                        .ask {
                            width: 100%;
                            height: 80px;
                            margin-top: 20px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;

                            .price {
                                font-size: 25px;
                                color: #e05500;
                                font-weight: bold;

                                .num {
                                    font-size: 35px;
                                    color: #e05500;
                                }
                            }

                            .btn {
                                width: 160px;
                                height: 60px;
                                color: #fff;
                                font-weight: bold;
                                border: 0;
                                background-color: #1e6fff;
                                border-radius: 15px;
                            }
                        }
                    }
                }
            }
        }
    }

    .footer {
        width: 95%;
        // height: 427px;
        padding: 0 15px;
        overflow: hidden;
        background-color: #fff;
        margin: 10px auto;
        border-radius: 20px;

        .fff {
            width: 300px;
            height: 500px;
            margin-right: 30px;

            img {
                width: 300px;
                height: 300px;

            }
        }

        .medicList {

            column-count: 2
        }
    }
}
</style>




<!-- 15872406173 -->